{% extends "demo_feature_blending/layout.html" %}
{% block content %}

<div class="container"><div class="row justify-content-md-center"><div class="col-md-10" id="main-column">
    <!-- title -->
    <div class="row" id="title">
        <h4>
            Collaging on Internal Representations: An Intuitive Approach for Semantic Transfiguration
        </h4>
        <h2>
            Demo: Feature blending <i>(semantic transplantation)</i>
        </h2>
    </div>
    <!-- main ui -->
    <div class="row" id="main-ui">
        <div class="col-md-3">
            <h4>source</h4>
            <div id="p5-source-wrapper" class="p5-wrapper">
                <div id="p5-source" class="p5"></div>
            </div>
        </div>
        <div class="col-md-3">
            <h4>reference</h4>
            <div id="p5-reference-wrapper" class="p5-wrapper">
                <div id="p5-reference" class="p5"></div>
            </div>
            <div id="sketch-control" class="row">
                <button class="btn btn-danger" id="sketch-clear">clear region</button>
            </div>
        </div>
        <div class="col-md-3">
            <h4>blending weights</h4>
            <div id="main-ui-sliders-wrapper">
                <div id="main-ui-sliders">
                    <p>1st layer (4x4, nearest to <i>z</i>)</p>
                    <div class="row">
                        <div class="col-2">0</div>
                        <div class="col-8 weight-slider">
                            <input id="ex1" data-slider-id='ex1Slider' type="text"
                               data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="1.0"/>
                        </div>
                        <div class="col-2">1</div>
                    </div>
                    <p>2nd layer (8x8)</p>
                    <div class="row">
                        <div class="col-2">0</div>
                        <div class="col-8 weight-slider">
                            <input id="ex2" data-slider-id='ex2Slider' type="text"
                               data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.0"/>
                        </div>
                        <div class="col-2">1</div>
                    </div>
                    <p>3rd layer (16x16)</p>
                    <div class="row">
                        <div class="col-2">0</div>
                        <div class="col-8 weight-slider">
                            <input id="ex3" data-slider-id='ex3Slider' type="text"
                               data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.0"/>
                        </div>
                        <div class="col-2">1</div>
                    </div>
                    <p>4th layer (32x32)</p>
                    <div class="row">
                        <div class="col-2">0</div>
                        <div class="col-8 weight-slider">
                            <input id="ex4" data-slider-id='ex4Slider' type="text"
                               data-slider-min="0" data-slider-max="1" data-slider-step="0.1" data-slider-value="0.0"/>
                        </div>
                        <div class="col-2">1</div>
                    </div>
                </div>
            </div>
            <div class="row" id="submit-row">
                <button class="btn btn-primary" id="blending-submit" disabled>execute blending</button>
            </div>
        </div>
        <div class="col-md-3">
            <h4>result</h4>
            <div id="p5-result-wrapper" class="p5-wrapper">
                <div id="p5-result" class="p5"></div>
            </div>
            <div id="result-control" class="row">
                <input id="exResult" data-slider-id='ex1Slider' type="text"
                       data-slider-min="0" data-slider-max="15" data-slider-step="1" data-slider-value="15"/>
            </div>
        </div>
    </div>
    <!-- image generation -->
    <div class="form-row justify-content-md-center" id="class-selection">
        <div class="form-group col-md-7">
            <label for="class-select">Select class</label>
            <select id="class-select" class="form-control">
                <option value="-1">Random</option>
            </select>
        </div>
        <div class="col-md-2">
            <label for="class-submit">&nbsp;</label>
            <button type="submit" class="form-control btn btn-primary" id="class-submit">generate images</button>
        </div>
    </div>
    <!-- image selection -->
    <div class="form-row justify-content-md-center" id="image-selection-buttons">
        <div class="col-md-2">
            <button type="submit" class="form-control btn btn-success" id="image-selection-source" disabled>use as source</button>
        </div>
        <div class="col-md-2">
            <button type="submit" class="form-control btn btn-secondary" id="image-selection-reference" disabled>use as reference</button>
        </div>
    </div>
    <div class="row justify-content-md-center">
        <ul class="col-md-9" id="image-selection-body">
            <!--
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>

            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>

            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            <li class="image-selection-item">
                <img src="static/demo_spatial_translation/img/ImageNetDogAndCatDataset/152.jpg">
            </li>
            -->
        </ul>
    </div>
</div></div>
</div>

{% endblock %}